<script setup>

import avatar from "@/assets/default.png";
import {Plus, Upload} from "@element-plus/icons-vue";
import {ref} from "vue"
import {userInfoUpdateService, userResetPasswordService} from "@/api/user.js";
import {ElMessage} from "element-plus";
const passwordData=ref({
  "old_pwd":'',
  "new_pwd":'',
  "re_pwd":''
});

const rules={
  old_pwd:[
    {required:true,message:'请输入原密码',trigger:'blur'},
    {min:5,max:16,message:'地址应为5-16位',trigger:'blur'},
  ],
  new_pwd:[
    {required:true,message:'请输入新密码',trigger:'blur'},
    {min:5,max:16,message:'地址应为5-16位',trigger:'blur'},
  ],
  re_pwd:[
    {required:true,message:'请再次输入新密码',trigger:'blur'},
    {min:5,max:16,message:'地址应为5-16位',trigger:'blur'},
  ]
}

import{useRouter} from 'vue-router';
const router=useRouter()

const resetPassword=async ()=>{
  let result=await userResetPasswordService(passwordData.value)
  ElMessage.success(result.msg?result.msg:"修改成功")
  router.push('/user/info')
}

</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span><strong>更改密码</strong></span>
      </div>
    </template>
    <el-row>
      <el-col :span="12" >
        <el-form :model="passwordData"  :rules="rules"   label-width="auto" size="large" style="max-width: 600px">
          <el-form-item label="原密码:" prop="old_pwd" >
            <el-input  v-model="passwordData.old_pwd" type="password"></el-input>
          </el-form-item>
          <el-form-item label="新密码:" prop="new_pwd">
            <el-input v-model="passwordData.new_pwd" type="password"></el-input>
          </el-form-item>
          <el-form-item label="重新输入密码:" prop="re_pwd">
            <el-input v-model="passwordData.re_pwd" type="password"></el-input>
          </el-form-item>


          <el-button class="button" type="primary" auto-insert-space  @click="resetPassword" >
            修改
          </el-button>
        </el-form>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped lang="scss">

</style>